<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form mb-4">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="组柜名称" name="cabinetGroupId">
						<a-select
							v-model:value="searchFormState.cabinetGroupId"
							placeholder="请选择组柜"
							:options="cabinetGroupOptions"
							allow-clear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="柜子名称" name="cabinetName">
						<a-input v-model:value.trim="searchFormState.cabinetName" placeholder="请输入柜子名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="组织" name="orgName">
						<a-input v-model:value.trim="searchFormState.orgName" placeholder="请输入组织名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="管理员" name="adminName">
						<a-input v-model:value.trim="searchFormState.adminName" placeholder="请输入管理员名称" />
					</a-form-item>
				</a-col>
				<template v-if="advanced">
					<a-col :span="6">
						<a-form-item label="柜子编号" name="cabinetCode">
							<a-input v-model:value.trim="searchFormState.cabinetCode" placeholder="请输入柜子编号" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="柜子类型" name="cabinetTypeId">
							<a-select
								v-model:value="searchFormState.cabinetTypeId"
								placeholder="请选择柜子类型"
								:options="cabinetTypeOptions"
								allow-clear
							/>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="资产编号" name="assetCode">
							<a-input v-model:value.trim="searchFormState.assetCode" placeholder="请输入资产编号" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="开锁模式" name="cabinetLockType">
							<a-select
								v-model:value="searchFormState.cabinetLockType"
								placeholder="请选择开锁模式"
								:options="cabinetLockTypeOptions"
								allow-clear
							/>
						</a-form-item>
					</a-col>
				</template>
				<a-col :span="6">
					<a-button type="primary" @click="table.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="resetForm">重置</a-button>
					<a @click="toggleAdvanced" style="margin-left: 8px">
						{{ advanced ? '收起' : '展开' }}
						<component :is="advanced ? 'up-outlined' : 'down-outlined'" />
					</a>
				</a-col>
			</a-row>
		</a-form>
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('bizCabinetInfoAdd')">
						<template #icon>
							<plus-outlined />
						</template>
						新增
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'cabinetGroupName'">
					<a @click="goCabinetGroupList(record)">{{ record.cabinetGroupName }}</a>
				</template>
				<template v-if="column.dataIndex === 'state'">
					<span v-if="record.state === 1">启用</span>
					<span v-if="record.state === 0">停用</span>
					<span></span>
				</template>
				<template v-if="column.dataIndex === 'linkerList'">
					<a type="text" @click="openLinkerDialog(record.id)">联系人({{ record.linkerCount }})</a>
				</template>
				<template v-if="column.dataIndex === 'cabinetDoorMgr'">
					<a @click="goCabinetDoorList(record)">柜门管理</a>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record)" v-if="hasPerm('bizCabinetInfoEdit')">编辑</a>
						<a-dropdown>
							<a class="ant-dropdown-link">
								更多
								<DownOutlined />
							</a>
							<template #overlay>
								<a-menu>
									<a-menu-item>
										<a @click="goGoodsList(record)">物品列表</a>
									</a-menu-item>
									<a-menu-item>
										<a @click="goPermissionList(record)">人员授权</a>
									</a-menu-item>
									<a-menu-item>
										<a @click="deviceVideoRef.onOpen(record.cabinetCode)">实时监控</a>
									</a-menu-item>
									<!--									<a-menu-item>-->
									<!--										<a @click="makingInventory(record)">盘库</a>-->
									<!--									</a-menu-item>-->
									<a-menu-item>
										<a-popconfirm
											:title="`确定要${record.state === 0 ? '启用' : '停用'}吗？`"
											@confirm="switchBizCabinetState(record.id)"
										>
											<a type="link" size="small" v-if="hasPerm('bizCabinetInfoDelete')">
												{{ record.state === 0 ? '启用' : '停用' }}
											</a>
										</a-popconfirm>
									</a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="onSuccess" />
	<CabinetLinkman ref="cabinetLinkmanRef" @successful="afterChooseLinker" />
	<DeviceVideo ref="deviceVideoRef" />
</template>

<script setup name="cabinetinfo">
	import { watchEffect } from 'vue'
	import { message } from 'ant-design-vue'
	import Form from './form.vue'
	import DeviceVideo from '../deviceVideo/deviceVideo.vue'
	import CabinetLinkman from '../cabinetlinkman/index.vue'
	import bizCabinetInfoApi from '@/api/biz/bizCabinetInfoApi'
	import bizCabinetTypeApi from '@/api/biz/bizCabinetTypeApi'
	import bizCabinetGroupApi from '@/api/biz/bizCabinetGroupApi'
	import { useRouter } from 'vue-router'

	const cabinetLinkmanRef = ref()
	const deviceVideoRef = ref()
	let searchFormState = reactive({})
	const searchFormRef = ref()
	const emit = defineEmits({ successful: null })
	const table = ref()
	const formRef = ref()
	const { proxy } = getCurrentInstance()
	const cabinetTypeOptions = ref([])
	const cabinetGroupOptions = ref([])
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	// 查询区域显示更多控制
	const advanced = ref(false)
	const toggleAdvanced = () => {
		advanced.value = !advanced.value
	}
	const columns = [
		{
			title: '组柜',
			dataIndex: 'cabinetGroupName',
			ellipsis: true
		},
		{
			title: '柜子',
			dataIndex: 'cabinetName',
			ellipsis: true
		},
		{
			title: '柜子编号',
			dataIndex: 'cabinetCode',
			ellipsis: true
		},
		{
			title: '柜子类型',
			dataIndex: 'cabinetTypeName',
			ellipsis: true
		},
		{
			title: '存放区域',
			dataIndex: 'locationName',
			ellipsis: true
		},
		{
			title: '组织',
			dataIndex: 'orgName',
			ellipsis: true
		},
		{
			title: '存放总数',
			dataIndex: 'totalStock',
			ellipsis: true
		},
		{
			title: '当前在库',
			dataIndex: 'currentStock',
			ellipsis: true
		},
		{
			title: '当前借出',
			dataIndex: 'currentBorrowed',
			ellipsis: true
		},
		{
			title: '管理员',
			dataIndex: 'adminUserNames',
			ellipsis: true
		},
		{
			title: '状态',
			dataIndex: 'state',
			width: '50px',
			ellipsis: true
		},
		{
			title: '柜门管理',
			dataIndex: 'cabinetDoorMgr',
			width: '75px',
			ellipsis: true
		},
		{
			title: '联系人',
			dataIndex: 'linkerList',
			width: '80px',
			fixed: 'right',
			ellipsis: true
		}
	]
	// 操作栏通过权限判断是否显示
	if (hasPerm(['bizCabinetInfoEdit', 'bizCabinetInfoDelete'])) {
		columns.push({
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			width: '100px',
			fixed: 'right'
		})
	}
	let selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	// 柜子的开锁模式：1-单人开锁 2-双人开锁 3-双人开锁，至少一个管理员
	const cabinetLockTypeOptions = ref([
		{
			label: '单人开锁',
			value: 1
		},
		{
			label: '双人开锁',
			value: 2
		},
		{
			label: '双人开锁，至少一个管理员',
			value: 3
		}
	])
	const loadData = (parameter) => {
		const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
		return bizCabinetInfoApi.bizCabinetInfoPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}
	const openLinkerDialog = (cabinetInfoId) => {
		cabinetLinkmanRef.value.onOpen(null, cabinetInfoId)
	}
	const afterChooseLinker = () => {
		table.value.refresh(true)
	}

	const switchBizCabinetState = (id) => {
		bizCabinetInfoApi.bizCabinetInfoSwitchState({ id: id }).then(() => {
			message.success('操作成功')
			table.value.refresh(false)
		})
	}

	bizCabinetTypeApi.bizCabinetTypeList({}).then((res) => {
		cabinetTypeOptions.value = res.map((item) => {
			return {
				label: item.name,
				value: item.id
			}
		})
	})

	bizCabinetGroupApi.bizCabinetGroupList({}).then((res) => {
		cabinetGroupOptions.value = res.map((item) => {
			return {
				label: `${item.cabinetGroupCode}-${item.cabinetGroupName}`,
				value: item.id
			}
		})
	})

	const _useRouter = useRouter()

	watch(
		() => _useRouter.currentRoute.value,
		(newValue, oldValue) => {
			if (newValue.name === 'cabinetinfo') {
				let params = newValue.params
				console.log('params=', params)
				// 接收路由参数
				let cabinetGroupId = params.cabinetGroupId
				if (cabinetGroupId && cabinetGroupId !== searchFormState.cabinetGroupId) {
					console.log('cabinetGroupId=', cabinetGroupId)
					searchFormState.cabinetGroupId = cabinetGroupId
					// 加载数据
					if (table.value) {
						table.value.refresh(true)
					}
				}
			}
		},
		{
			immediate: true
		}
	)

	const goCabinetDoorList = (record) => {
		_useRouter.replace({
			name: 'cabinetdoor',
			params: {
				cabinetId: record.id,
				cabinetName: record.cabinetName
			}
		})
	}
	const goCabinetGroupList = (record) => {
		_useRouter.replace({
			name: 'cabinetgroup',
			params: {
				cabinetGroupId: record.cabinetGroupId,
				cabinetGroupName: record.cabinetGroupName
			}
		})
	}
	const goGoodsList = (record) => {
		_useRouter.replace({
			name: 'bizGoods',
			params: {
				cabinetId: record.id
			}
		})
	}
	const goPermissionList = (record) => {
		_useRouter.replace({
			name: 'cabinetpermission',
			params: {
				cabinetId: record.id,
				cabinetName: record.cabinetName
			}
		})
	}

	const resetForm = () => {
		searchFormRef.value.resetFields()
		searchFormState.cabinetGroupId = null
		table.value.refresh(true)
	}
	const makingInventory = (record) => {}

	const onSuccess = () => {
		table.value.refresh(true)
		message.success('保存成功')
	}
</script>
